<%@ page contentType="text/html" pageEncoding="UTF-8"%>
<%@ include file="../header.jsp"%>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>${systemName }</title>
    <link rel="shortcut icon" href="${contextPath}/resources/favicon.ico"> 
    <link href="${contextPath}/resources/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${contextPath}/resources/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <!-- Data Tables -->
    <link href="${contextPath}/resources/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
    <link href="${contextPath}/resources/css/animate.min.css" rel="stylesheet">
    <link href="${contextPath}/resources/css/style.min.css?v=4.1.0" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="${contextPath}/resources/css/plugins/simditor/simditor.css" />
</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
       <div class="ibox-content">
        <form action="${contextPath}/system/good/update" class="form-horizontal" name="searchFrom" enctype="multipart/form-data" method="post" id="signupForm"> 
        	<input type="hidden" class="form-control" id="good_id" name="id" value="${good.id }"  >
        	<div class="form-group">
                <label class="col-sm-2 control-label">商品名称:</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="title" name="title" value="${good.title }"  >
                    <span class="help-block m-b-none"><i class="fa fa-info-circle"></i>这里写点提示的内容</span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">颜色:</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="colour" name="colour" autofocus value="${good.colour }" >
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">材质:</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="material" name="material" autofocus value="${good.material }" >
                </div>	
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商品描述:</label>
                <div class="col-sm-10">
                	<textarea id="description" class="form-control required" name="description" placeholder="这里输入商品描述" >
                	${good.description }
                    </textarea>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">销售价格:</label>
                <div class="col-sm-10">
                    <input type="number" class="form-control" name="salePrice" id="salePrice" value="${good.salePrice }">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">市场价格:</label>
                <div class="col-sm-10">
                    <input type="number" class="form-control" name="marketPrice" id="marketPrice" value="${good.marketPrice }">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">成本价格:</label>
                <div class="col-sm-10">
                    <input type="number" class="form-control" name="costPrice" id="costPrice" value="${good.costPrice }">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">提成比例:</label>
                <div class="col-sm-10">
                    <input type="number" class="form-control" name="percentageRate" id="percentageRate" value="${good.percentageRate }">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">库存:</label>
                <div class="col-sm-10">
                    <input type="number" class="form-control" name="amount" min="0" max="9999" id="amount" value="${good.amount }">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商品图片</label>
                <div class="col-sm-10">
                    <c:forEach items="${good.goodsImageList}" var="image" varStatus="vs"> 
                            <div class="good-image-div">
                            	<img alt="" src="${image.imageLarge}" width="50" height="50">
                            	<input type="hidden" name="goodsImageList[${vs.index }].id" value="${image.id}">
                            	<input type="hidden" name="goodsImageList[${vs.index }].imageLarge" value="${image.imageLarge}">
                            </div>
                     </c:forEach>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商品图片(可选择多个商品):</label>
                <div class="col-sm-10">
                    <input type="file" class="form-control" id="files" name="files" multiple >
                </div>
            </div>
            <div class="form-group">
                    <label class="col-sm-2 control-label">商品所属分类</label>
                    <div class="col-sm-10">
                       <c:forEach items="${categorys}" var="category" varStatus="vs">  
                       			<label class="checkbox-inline">
                            <input type="checkbox" value="${category.id }" name="categoryList[${vs.index}].id" 
                            <c:choose> 
					            <c:when test="${category.addHot  eq 1}">checked="checked" </c:when> 
					          </c:choose>
              				>${category.title}</label>
                       </c:forEach>
                    </div>
                </div>
            <div class="form-group">
                 <div class="col-sm-4 col-sm-offset-2">
                     <button class="btn btn-primary" type="submit">保存</button>
                 </div>
             </div>
             <label class="col-sm-2 control-label">商品规格</label>
           		 <c:forEach items="${good.specifications}" var="goodsSpecification" varStatus="vs">  
           		     <div data-max-index="${vs.index }" class="goodsSpecification-max-index-div">
           		     </div>
            		 <div class="ibox-content" style="border:1px dashed #000 ;">
            		 	 <div class="form-group">
	                    <label class="col-sm-2 control-label">规格名称</label>
	                    <div class="col-sm-4">
	                        <input type="hidden" name="specifications[${vs.index }].id" value="${goodsSpecification.id }">
	                      	<input type="text"   value="${goodsSpecification.name }" name="specifications[${vs.index }].name" >
	                    </div>
		             	</div>
		             	<div class="form-group">
		                    <label class="col-sm-2 control-label">市场价</label>
		                    <div class="col-sm-4">
		                      	<input type="text"  value="${goodsSpecification.marketPrice }"  name="specifications[${vs.index }].marketPrice" >
		                    </div>
		             	</div>
		             	<div class="form-group">
		                    <label class="col-sm-2 control-label">售卖价</label>
		                    <div class="col-sm-4">
		                      	<input type="text"  value="${goodsSpecification.salePrice }"  name="specifications[${vs.index }].salePrice" >
		                    </div>
		             	</div>
		             	<div class="form-group">
		                    <label class="col-sm-2 control-label">库存</label>
		                    <div class="col-sm-4">
		                      	<input type="text"  value="${goodsSpecification.amount }"  name="specifications[${vs.index }].amount" >
		                    </div>
		             	</div>
		             	<div class="form-group">
		                    <label class="col-sm-2 control-label">描述</label>
		                    <div class="col-sm-4">
		                      	<input type="text"  value="${goodsSpecification.desc }"  name="specifications[${vs.index }].desc" >
		                    </div>
		             	</div>
		             	<div class="form-group">
		                    <label class="col-sm-2 control-label">提成比例</label>
		                    <div class="col-sm-4">
		                      	<input type="text"  value="${goodsSpecification.percentageRate }"  name="specifications[${vs.index }].percentageRate" >
		                    </div>
		             	</div>
	             	</div>
                  </c:forEach>
             <div><input type="button" class="btn btn-primary" id="add-goods-specification-button" value="添加规格"> </div>
        
        
        	
        
        </form>
        </div>
    </div>
    <script src="${contextPath}/resources/js/jquery.min.js?v=2.1.4"></script>
    <script src="${contextPath}/resources/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="${contextPath}/resources/js/plugins/validate/jquery.validate.min.js"></script>
    <script src="${contextPath}/resources/js/plugins/validate/messages_zh.min.js"></script>
    <script src="${contextPath}/resources/js/plugins/jeditable/jquery.jeditable.js"></script>
    <script src="${contextPath}/resources/js/plugins/dataTables/jquery.dataTables.js"></script>
    <script src="${contextPath}/resources/js/plugins/dataTables/dataTables.bootstrap.js"></script>
    <script src="${contextPath}/resources/js/content.min.js?v=1.0.0"></script>
    <script type="text/javascript" src="${contextPath}/resources/js/plugins/simditor/module.js"></script>
    <script type="text/javascript" src="${contextPath}/resources/js/plugins/simditor/uploader.js"></script>
    <script type="text/javascript" src="${contextPath}/resources/js/plugins/simditor/hotkeys.js"></script>
    <script type="text/javascript" src="${contextPath}/resources/js/plugins/simditor/simditor.js"></script>
    <script type="text/javascript">
        var goods_specification_index = 0;
        var max_div = $('div.goodsSpecification-max-index-div');
        goods_specification_index = max_div.length;
        
	    $(document).ready(function() {  
	    	$("div.good-image-div").on("click",function(){
            	console.log('-----');
            	$(this).remove();
            });
	    	 $("#signupForm").validate({          
	    	    rules:{
	    	         title:{
	    	            required:true,
	    	            rangelength:[2,100]
	    	         },
		    	     description:{
		    	         required:true
		    	     },
	    	         salePrice:{
	    	        	 required:true,
	    	        	 number:true  
		    	     },
		    	     marketPrice:{
		    	    	 required:true,
		    	    	 number:true  
		    	     },
		    	     costPrice:{
		    	    	 required:true,
		    	    	 number:true  
		    	     },
		    	     percentageRate:{
		    	    	 required:true,
		    	    	 number:true  
		    	     },
		    	     amount:{
		    	    	 required:true,
		    	    	 number:true  
		    	     }
	    	     },
	    	     messages:{
	    	         title:{
	    	        	required:"用户名不能为空",
	    	      		rangelength:$.validator.format("输入的范围在 {0}-{1} 之间的字符.")
	    	         },
		    	     description:{
			    	    required:"商品描述不能为空",
			    	 },
		    	     salePrice:{
		    	    	 required:"售卖价不能为空",
		    	    	 number:"售卖价不能为空"
			    	 },
			    	 marketPrice:{
			    		 required:"售卖价不能为空",
			    		 number:"市场价不能为空"
			    	 },
			    	 costPrice:{
			    		 required:"售卖价不能为空",
			    		 number:"成本价不能为空"
			    	 },
			    	 percentageRate:{
			    		 required:"售卖价不能为空",
			    		 number:"提成不能为空"
			    	 },
			    	 amount:{
			    		 required:"库存不能为空",
			    		 number:"提成不能为空"
			    	 }
	    	     }
	    	});
	    	var editor=new Simditor({textarea:$("#description"),defaultImage:"img/a9.jpg"});
	    	$("#add-goods-specification-button").on('click',function(e){
	            var target = e.target;
	            var content = '';
	            content+='<div class="ibox-content" id="goods-specification-'+goods_specification_index+'">';
	            content+='<div class="form-group" style="border:1px dashed #999999;">';
	            content+='<label class="col-sm-2 control-label">规格名称:</label>';
	            content+='<div class="col-sm-4">';
	            content+='<input type="text" class="form-control" name="specifications['+goods_specification_index+'].name" autofocus >';
	            content+='</div>';
	            content+='<label class="col-sm-2 control-label">市场价:</label>';
	            content+='<div class="col-sm-4">';
	            content+='<input type="text" class="form-control"  name="specifications['+goods_specification_index+'].marketPrice" autofocus >';
	            content+='</div>';
	            content+='<label class="col-sm-2 control-label">售卖价:</label>';
	            content+='<div class="col-sm-4">';
	            content+='<input type="text" class="form-control" name="specifications['+goods_specification_index+'].salePrice"" autofocus >';
	            content+='</div>';
	            content+='<label class="col-sm-2 control-label">库存:</label>';
	            content+='<div class="col-sm-4">';
	            content+='<input type="text" class="form-control" name="specifications['+goods_specification_index+'].amount" autofocus >';
	            content+='</div>';
	            content+='<label class="col-sm-2 control-label">描述:</label>';
	            content+='<div class="col-sm-4">';
	            content+='<input type="text" class="form-control" name="specifications['+goods_specification_index+'].desc" autofocus >';
	            content+='</div>';
	            content+='<label class="col-sm-2 control-label">提成比例:</label>';
	            content+='<div class="col-sm-4">';
	            content+='<input type="text" class="form-control" name="specifications['+goods_specification_index+'].percentageRate" autofocus >';
	            content+='</div>';
	            content+='</div>';
	            content+='<div><input type="button" value="删除规格" class="btn btn-primary" id="goods-specification-delete-button-'+goods_specification_index+'" > </div>';
	            content+='</div>';
	            $("#signupForm").append(content);
	            (function(index){
	            	$("#goods-specification-delete-button-"+index).on("click",function(){
		            	$("#goods-specification-"+index).remove();
		            });
	            })(goods_specification_index);
	            
	            goods_specification_index++;
	            
	        });
	    });
    </script>
</body>
</html>
